<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<%@include file="header.jsp" %>
		<link rel="stylesheet" href="resources/css/validationEngine.jquery.css" type="text/css"/>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#dialog").dialog({
					modal: true,
					autoOpen: false,
					resizable: false,
					buttons: {
						Ok: function() {
							$( this ).dialog( "close" );
							$("#username").focus();
						}
					}
				});				
			});
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="splash">
				<img src="resources/images/pic1.jpg" alt="" />
			</div>
			<div id="menu">
				<ul>				
					<li><a href="index">Homepage</a></li>
					<li><a href="notebooks">Notebooks</a></li>
					<li>Account <span class="arrow"></span>
						<ul>
							<c:choose>
								<c:when test="${ firstname != null }">
									<li class="first"><a href="logout">Logout</a></li>
								</c:when>
								<c:when test="${ firstname == null}">
									<li class="first"><a href="login">Inloggen</a></li>
									<li><a href="registratie">Registreren</a></li>
								</c:when>
							</c:choose>	
						</ul>
					</li>
					<li><a href="about">About</a></li>
					<c:choose>
						<c:when test="${ admin == 0 || admin == null }">
							<li class ="cartI"> <img src="resources/images/shopping_cart.png" alt="" /></li>
							<li class ="cart"><a href="winkelwagen">Winkelwagen</a></li>
						</c:when>
						<c:when test="${ admin == 1 }">
							<li class ="cartI"> <img src="resources/images/adminmodule.png" alt="" /></li>
							<li class ="cart"><a href="admin">Admin module</a></li>
						</c:when>
					</c:choose>		
				</ul>				
				<br class="clearfix" />
			</div>
			
			<div id="page">
				<div id="content">				
					<div class="login">
					<c:if test="${error != null}">
						<script type="text/javascript">
							$(function() {
								$("#dialog").dialog("open");
							});
						</script>
					</c:if>
					<form id="loginform" action="dologin" method="post">
					<div class="layoutInput">
						<table class="specList" cellspacing="0">
							<tr><th colspan="2" >Login</th></tr>
								<tr>
									<td>E-mailadres:</td>
									<td><input class="validate[required, custom[email]]" type="text" id="username" name="username" size="30" /></td>
								</tr>
								<tr>
									<td>Wachtwoord:</td>
									<td><input class="validate[required, minSize[5], maxSize[20]]" type="password" id="password" name="password" size="30" /></td>
								</tr>
						</table>
					</div>
						<div style="text-align: center; margin-top: 15px">					
							<button class="submit" type="submit" id="btnLogin" >Login</button>
						</div>
					</form>
					</div>
					<br class="clearfix" />
					
				</div>
				<div id="sidebar">
					<div class="box" >
					<h3>Mijn Account</h3>
								<c:choose>
									<c:when test="${firstname != null}">
									Welkom, <a href="account" ><c:out value="${firstname}"></c:out></a>
									</c:when>
									<c:when test="${firstname == null}">
									Log nu in !
									</c:when>
								</c:choose>
					</div>
					<div class="box">
						<h3>contact</h3>
						<p>
							Neem contact op door <a href="mailto:info@notebookshop.com">hier</a> te klikken.
						</p>
					</div>
					<div id="dialog" title="Helaas.." >
						<p>
							<span class="ui-icon ui-icon-locked" style="float:left; margin:0 7px 50px 0;"></span>
							<c:out value="${error}"></c:out>
						</p>
					</div>
				</div>
				<br class="clearfix" />
			</div>
		</div>
		<div id="footer">		
		</div>
		<script src="resources/js/jquery.validationEngine-nl.js" type="text/javascript" charset="utf-8"></script>
		<script src="resources/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function(){
				//OnSubmit -- Checken of aan alles voldaan is. Ja -> submit gaat door; nee -> submit wordt gestopt, client-sided validatie wordt uitgevoerd
				$("#loginform").submit(function(e) {
			    	if (jQuery('#loginform').validationEngine('validate')) {
			        	return true;
			        } else {
			        	e.preventDefault();
			        	return false;
			        }
			    });
				
				//Binden van de validatie engine aan het formulier
				$("#loginform").validationEngine();	
			});
		</script>
	</body>
</html>